/*
 * @Description: 基本柱状图
 * @Author: YoungWind
 * @Date: 2020-09-20 19:22:50
 * @LastEditTime: 2020-09-27 16:45:41
 * @LastEditors: YoungWind
 * @FilePath: \ccd3\src\ccd3\bar\charts\BarChart.js
 */

import BaseChart from '../../BaseChart.js'
export default class BarChart extends BaseChart {
  constructor(id, data) {
    super(id, data)
    // 数据
    this.data = this.data;
    this.xAxisKey = 'x';
    this.yAxisKey = 'y';

    this.xAxisScale = null;
    this.xAxisGroup = null;
    this.yAxisScale = null;
    this.yAxisGroup = null;

    this.rectGroup = null;
    this.transition = null;
    this.color = 'red';
  }

  /**
   * 设置x轴值
   */
  setXAxisKey(name) {
    this.xAxisKey = name;
    return this;
  }
  /**
   * 设置y轴值
   */
  setYAxisKey(name) {
    this.yAxisKey = name;
    return this;
  }

  init() {
    // 初始化画布
    this.initSvg();
    // 初始化主体内容
    this.initMainGroup();
    // 初始化柱状图的柱
    this.initRectGroup();
    // 初始化坐标系
    this.initAxes();
    return this;
  }

  /**
   * @description: 初始化坐标轴
   * @param {type} 
   * @return {type} 
   */
  initAxes() {
    this.xAxisGroup = this.svg.append('g')
      .attr('id', `${this.id}xAxis`)
      .attr('transform', `translate(${this.margin.left},${this.margin.top + this.innerHeight})`);

    this.yAxisGroup = this.svg.append('g')
      .attr('id', `${this.id}yAxis`)
      .attr('transform', `translate(${this.margin.left},${this.margin.top})`);
  }


  /**
   * @description: 初始化矩形组
   * @param {type} 
   * @return {type} 
   */
  initRectGroup() {
    this.rectGroup = this.mg.append('g');
  }

  /**
   * @description: 更新
   * @param {type} 
   * @return {type} 
   */
  render(data) {
    if (data) {
      this.data = data;
    }
    this.renderScale();
    this.renderRectGroup();
    this.renderAxes();
    return this;
  }

  /**
   * @description: 更新rect元素
   * @param {type} 
   * @return {type} 
   */
  renderRectGroup() {
    this.rectGroupElements = this.rectGroup
      .attr('fill', this.color)
      .selectAll('rect')
      .data(this.data)
      .join('rect')
      .transition()
      .attr('x', d => this.xAxisScale(d[this.xAxisKey]))
      .attr('width', this.xAxisScale.bandwidth())
      .attr('height', d => this.innerHeight - this.yAxisScale(+d[this.yAxisKey]))
      .attr('y', d => this.yAxisScale(+d[this.yAxisKey]));
  }

  /**
   * @description: 更新坐标轴 
   * @param {type} 
   * @return {type} 
   */
  renderAxes() {
    this.xAxisGroup.transition()
      .call(d3.axisBottom(this.xAxisScale))
      .selectAll('g')
      .select('text')
      .attr('transform', 'rotate(30) translate(29, -5)');

    this.yAxisGroup.transition()
      .call(d3.axisLeft(this.yAxisScale))
  }

  /**
   * @description: 更新坐标轴比例尺
   * @param {type} 
   * @return {type} 
   */
  renderScale() {
    this.xAxisScale = d3.scaleBand()
      .domain(this.data.map(d => d[this.xAxisKey]))
      .range([0, this.innerWidth])
      .paddingInner(0.5)
      .paddingOuter(0.5)
      .align(0.5)

    this.yAxisScale = d3.scaleLinear()
      .domain([0, d3.max(this.data.map(d => +d[this.yAxisKey]))])
      .nice()
      .range([this.innerHeight, 0]);
  }
}